<template>
  <div style="background:#fafafa;">
    <div class="flex-column">
      <scroll-view scroll-y scroll-with-animation @scroll="leftScroll" :scroll-into-view="leftView" class="scroll left flex-row" style="width:88px;">
        <tab-y @change="groupChange" :lists="types" :index="initActiveIndex" :title="'type'"></tab-y>
      </scroll-view>
      <scroll-view v-if="!isLoading" scroll-with-animation @scroll="rightScroll" :scroll-into-view="rightView" scroll-y class="scroll right flex-item flex-row">
        <div :id="type.product[0]?type.product[0].dom:'x'+indexType" class="flex-row" v-for="(type,indexType) in types" :key="indexType">
          <div class="flex-item flex-row card-item" style="position:relative;"
            v-for="(item,index) in type.product" :key="index">
            <o-card
              :price="'￥ '+item.price"
              :desc="'折扣'+item.discount"
              :content="item.name"
              :thumb="item.image||'https://ws3.sinaimg.cn/large/006tNbRwgy1fysgjwfbkrj30ev0h1abw.jpg'">
            </o-card>
            <div style="position:absolute;right:-16rpx;bottom:40rpx;">
              <number-step
                @change="stepperChange"
                :otherParams="[indexType,index]"
                :number="item.num">
              </number-step>
              <!-- <zan-stepper 
                v-bind="{stepper:item.num,min:0,max:10,otherParams:[indexType,index]}" componentId="stepper1" 
                @handleZanStepperChange="stepperChange"></zan-stepper> -->
            </div>
          </div>
        </div>
        <!-- <div >{{item.name}}</div> -->
      </scroll-view>

      <blanck :loading="true" v-else>..</blanck>
      <img @click="showPopup=true;" v-if="!showPopup" :class="{car: true, isShaking:stepChanging}" src="/static/car.png" alt="">
      <submit-bar
        @barClick="showPopup=!showPopup"
        :price="sum"
        buttontext="结算"
        @submit="onClickButton"
        :disabled="sum<=0">.</submit-bar>

      
      <div class="popup-F--bottom zan-popup zan-popup--bottom" :class="{ 'zan-popup--show' : showPopup }">
        <div class="zan-popup__mask" @click="showPopup=false"></div>
        <div class="zan-popup__container">
          <scroll-view scroll-y style="width:100vw;max-height:60vh;">
            <div class="flex-row" v-for="(type,indexType) in types" :key="indexType">
              <div class="flex-item flex-row card-item" style="position:relative;"
                v-for="(item,index) in type.product" :key="index" v-if="item.num>0">
                <o-card
                  :price="'￥'+item.price"
                  :desc="'折扣'+item.discount"
                  :content="item.name"
                  :thumb="item.image||'https://ws3.sinaimg.cn/large/006tNbRwgy1fysgjwfbkrj30ev0h1abw.jpg'">
                </o-card>
                </van-card>
                <div style="position:absolute;right:-16rpx;bottom:40rpx;">
                   <number-step
                    @change="stepperChange"
                    :otherParams="[indexType,index]"
                    :number="item.num">
                  </number-step>
                </div>
              </div>
            </div>
          </scroll-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let AV = require('leancloud-storage/live-query')
  import tabY from '@/components/oui/tab-y.vue'
  import OCard from '@/components/oui/card.vue'
  import SubmitBar from '@/components/oui/submitBar.vue'
  import NumberStep from '@/components/oui/NumberStep.vue'
  import Blanck from '@/components/blanck.vue'

  export default {
    data() {
      return {
        types: [],
        products: [],
        typeSelect: 0,
        stepper1: {
          stepper: 0,
          min: 0,
          max: 10
        },
        isLoading: true,

        initActiveIndex:0,
        leftView: '',
        rightView: '',
        stepperNum: 0,
        showPopup:false,
        stepChanging: false,
      }
    },
    components: {tabY, OCard, NumberStep, SubmitBar, Blanck},
    computed: {
      menuSelect() {
        let res = []
        this.types.forEach(function(type){
          type.product.forEach(function(item) {
            if (item.num>0) {
              res.push(item)
            }
          })
        })
        return res 
      },
      sum() {
        let sum = 0
        this.menuSelect.forEach(item=> {
          let price = isNaN(parseFloat(item.price))?100:(parseFloat(item.price)-parseFloat(item.discount))
          sum += Math.round(parseFloat(item.num) * price*100)/100
        })
        return sum
      }
    },
  
    methods: {
      stepperChange({otherParams, isAdd}) {
        this.stepChanging= true
        setTimeout(() => {
          this.stepChanging = false
        }, 500);
        this.types[otherParams[0]].product[otherParams[1]].num += isAdd?1:-1
        this.$store.commit('setMenu',this.menuSelect)
      },
      leftScroll(e) {
        
      },
      rightScroll(e) {
        if (this.rightScroll)
        this.rightView = ''
      },
      async getProductType() {
        let setting = await new AV.Query('setting').find()
        this.types = setting[0].attributes.productType.map((item,index)=>({type:item.type,product:[],dom:'type_'+index}))
        this.types.push({type:'其他',product:[]})
        this.products = (await new AV.Query('product').find()).map(item=>Object.assign(item.attributes,{num:0}))
        this.initHistoryMenu()
  
        this.types.forEach(element => {
          this.products.forEach((item,index)=> {
            if (item.type == element.type) {
              item.dom = element.dom+'_'+index
              element.product.push(item)
            }
          })
        });
        return Promise.resolve()
      },
      initHistoryMenu() {
        let storeMenu = this.$store.state.menu
        if (!storeMenu) {return this.isLoading = false}
        try {
          let products = JSON.parse(JSON.stringify(this.products))
          products.forEach((product)=> {
            storeMenu && storeMenu.forEach(menu=>{
              if (product.name==menu.name) {
                console.log('match..', product.name);
                this.isLoading = false
                return product.num = menu.num
              }
            })
          })
          this.products = products
          this.isLoading = false
        } catch (error) {
          this.isLoading = false
          console.log(error);
          
        }
      },
      groupChange(e) {
        let index = e
        
        if (this.types[index].product.length>0) {
          this.rightView = this.types[index].product[0].dom
        }
        this.typeSelect = index
      },
      onClickButton(){
        if (parseFloat(this.sum)<=0) return;
        wx.navigateTo({
          url: './pay/main'
        })
      }
    },
    onShow() {
      const index = this.$mp.query.index;
      if (index) {
        this.initActiveIndex = index
        setTimeout(() => {
          this.groupChange(index)
        }, 1000);
      }

      if (!this.$store.state.menu || this.$store.state.menu.length==0) {
        this.types.forEach(function(type){
          type.product.forEach(function(item) {
            if (item.num>0) {
              item.num=0
            }
          })
        })
      }
    },
    async onLoad() {
      let res = await this.getProductType()
    },
    onUnload() {
      // this.types.forEach(function(type){
      //   type.product.forEach(function(item) {
      //     if (item.num>0) {
      //        item.num = 0
      //     }
      //   })
      // })
    },
  }
</script>

<style  scoped>
.car {
  height: 60px;
  width: 60px;
  left: 15px;
  z-index: 9999;
  position: fixed;
  bottom: 15px;
  border-radius:50%;
  transition: all .3s;
}
.isShaking{
  width: 80px;
  height: 80px;
  bottom: 0;
}
.scroll {
  overflow: hidden;
  text-decoration: none;
  height: calc(100vh - 45px);
}
.right {
  width: calc(100vw - 110px);
}
.left {
  /* background: rgba(0,0,0,.2); */
  width: 100px;
  
  font-size: 13px;
  color: #555;
}
.left .item {
  height: 40px;
}
.left .active {
  color: #fff;
  background: #222;
}
</style>
<style>
.zan-popup--bottom .zan-popup__container {
  bottom:45px;
  left:0;
}
</style>
